<script setup lang="ts">
import { ref } from 'vue'
// import { reactive } from 'vue'

// const versions = reactive({ ...window.electron.process.versions })

// console.log(window.electron)
const openNewWin = () => {
  console.log(window)
  window.electron.ipcRenderer.send('open-child-window')

}

const closeWin = () => {
  window.electron.ipcRenderer.send('closeHandle', 123123123)
}

// 获取文件夹名称函数
let fileName = ref('')
const getFileName = async () => {
  fileName.value = await window.electron.ipcRenderer.invoke('dialog:openFile')
  console.log(fileName.value)
}

// 动态创建菜单按钮
const makeMenu = () => {
  const res = window.electron.ipcRenderer.sendSync('makeMenu')
  console.log(res)
}

const menuValue = ref('')
const makeMenuItem = async () => {
  const res = await window.electron.ipcRenderer.send('makeMenuItem1', menuValue.value)
  console.log(res)
}

// 右键呼出菜单
const showRightMenu = async () => {
  const res = await window.electron.ipcRenderer.invoke('showRightMenu')
  console.log(res)
}

// 获取所有窗口
let winsMsg = ref('')
window.electron.ipcRenderer.on('getWinMsg', (_, val) => {
  winsMsg.value = '当前' + val + '个窗口'
})

// 读取文件
let fileValue = ref('')
const readFileHandle = async () => {
  let sendData:string = ''
  if(fileName.value != ''){
    sendData = fileName.value
  }
  const res = await window.electron.ipcRenderer.invoke('readFile',sendData)
  console.log(res)
  window.electron.ipcRenderer.on('fileValue', (_, val) => {
    console.log(val)
    fileValue.value = val
  })
}
</script>

<template>
  <button @click="openNewWin">打开一个新窗口</button>
  <div @contextmenu="showRightMenu" class="demo_wrapper">
    <div class="btn_wrapper">
      <span @click="closeWin">按钮1</span>
      <span @click="getFileName">获取文件夹名称:{{ fileName }}</span>
      <span @click="makeMenu">动态创建菜单</span>
    </div>
    <div>
      <span @click="makeMenuItem">生成自定义菜单</span>
      <input type="text" v-model="menuValue" />
    </div>
    <div>
      <span @click="showRightMenu">右键呼出菜单</span>
      <input type="areatext" v-model="winsMsg" placeholder="右键查看当前窗口数量" />
    </div>
    <div>
      <span @click="readFileHandle">读取文件</span>
      <pre class="codeBox">{{ fileValue }}</pre>
    </div>
  </div>
</template>

<style scoped>
.demo_wrapper {
  width: 100%;
  height: 100%;
}
.btn_wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 50px;
  box-sizing: border-box;
}

span {
  min-width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: green;
  cursor: pointer;
  color: #fff;
  width: fit-content;

  display: inline-block;
  margin: 20px;
  padding: 0 10px;
}
.codeBox{
  border: 1px solid red;
  border-radius: 10px;
  width: 90%;
  margin: 0 auto;
  max-height: 300px;
  overflow-y: scroll;
  color: #fff;
}
</style>
